#trash {
  height: 100vh;
  display: flex;
  > .note-detail {
    flex-grow: 1;
  }
}
.note-sidebar {
  height: 100%;
  position: relative;
  width: 320px;
  border-right: 1px solid #ccc;
  background-color: #eee;

  > h3 {
    text-align: center;
    padding: 14px 0;
    font-weight: 00;
    background: #f7f7f7;
    border-bottom: 1px solid #ccc;
  }

  .notes {
    li {
      &:nth-child(odd) {
        background-color: #f2f2f2;
      }
      cursor: pointer;
      a {
        display: flex;
        padding: 3px 0;
        font-size: 14px;
        border: 1px solid transparent;
      }
      transition: all 0.25s ease;
      &:hover {
        background: #83c2b3;
      }
      .active {
        border: 1px solid #83c2b3;
        background: #83c2b3;
      }

      span {
        padding: 0 10px;
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}

.note-detail {
  flex: 1;
  display: flex;
  flex-direction: column;

  .note-detail-ct {
    height: 100%;
  }

  .note-empty {
    font-size: 50px;
    color: #ccc;
    text-align: center;
    margin-top: 100px;
  }

  .note-bar {
    padding: 4px 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    &:after {
      content: "";
      display: block;
      clear: both;
    }
    span {
      font-size: 12px;
      color: #999;
      margin-right: 20px;
    }
    span:nth-of-type(3) {
      flex-grow: 1;
    }
    span:nth-of-type(4),
    span:nth-of-type(5) {
      cursor: pointer;
      margin: 0 5px;
    }
  }

  .note-title {
    border-bottom: 1px solid rgba(18, 18, 18, 0.08);
    input,
    span {
      display: inline-block;
      width: 100%;
      border: none;
      outline: none;
      font-size: 24px;
      padding: 10px 20px;
    }
  }

  .editor {
    height: ~"calc(100% - 78px)";
    position: relative;
    overflow: auto;
    display: flex;
  }
  .preview {
    cursor: default;
    width: 50%;
    flex-grow: 1;
    height: ~"calc(100vh - 80px)";
    overflow: auto;
    padding: 20px;
    border-left: 1px solid rgba(18, 18, 18, 0.08);
    &::-webkit-scrollbar {
      display: none;
    }
  }

  textarea {
    // position: absolute;
    width: 50%;
    flex-grow: 1;
    overflow: auto;
    padding: 20px;
    border: none;
    resize: none;
    outline: none;
    line-height: 20px;
    font-size: 16px;
    font-family: -apple-system, "Noto Sans", "Helvetica Neue", Helvetica,
      "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC",
      "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC",
      "Source Han Sans CN", "Microsoft YaHei", "Wenquanyi Micro Hei",
      "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp",
      sans-serif;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  code {
    color: #f66;
  }
}
